<template>
  <div class="home_content">
    <div class="inter_tit">面试官</div>
    <div class="inter_wrap">
      <div class="flex home_header">
        <div class="flex">
          <div class="hd_img">
            <img src="@/assets/evaluation/user.png" alt="" />
          </div>
          <div class="flex_unit hd_info">
            <div class="hd_name">
              <span>Alice</span>
            </div>
            <div class="hd_time">
              <span>上海分公司</span>
            </div>
          </div>
        </div>
        <div class="hd_dd">等待面试<span>3</span></div>
      </div>
    </div>
    <div class="flex home_time">
      <div class="inter_tit">预约日期</div>
      <div class="home_title_right flex">
        <el-select v-model="typeVal" class="type_date" readonly placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="dateVal" readonly class="date1" placeholder="筛选">
          <el-option
            v-for="item in sele"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="今天 11-23" name="first">
        <div class="make_list_box">
          <div class="make_list_time">
            <label>上午</label>
            <ul>
              <li class="active">
                <span>09:00-09:30</span>
                <button>已满</button>
              </li>
              <li>
                <span>09:30-10:00</span>
                <button>预约</button>
              </li>
              <li>
                <span>10:00-10:30</span>
                <button>预约</button>
              </li>
              <li>
                <span>10:30-11:00</span>
                <button>预约</button>
              </li>
              <li>
                <span>11:00-11:30</span>
                <button>预约</button>
              </li>
              <li>
                <span>11:30-12:00</span>
                <button>预约</button>
              </li>
            </ul>
          </div>
          <div class="make_list_time">
            <label>下午</label>
            <ul>
              <li>
                <span>13:00-13:30</span>
                <button>预约</button>
              </li>
              <li>
                <span>13:30-14:00</span>
                <button>预约</button>
              </li>
              <li>
                <span>14:00-14:30</span>
                <button>预约</button>
              </li>
              <li>
                <span>14:30-15:00</span>
                <button>预约</button>
              </li>
              <li>
                <span>15:00-15:30</span>
                <button>预约</button>
              </li>
              <li>
                <span>15:30-16:00</span>
                <button>预约</button>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="明天 11-24" name="second">明天 11-24</el-tab-pane>
      <el-tab-pane label="11-25" name="third">11-25</el-tab-pane>
      <el-tab-pane label="11-25" name="fourth">11-25</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "interview",
  data() {
    return {
      typeVal: "全天",
      dateVal: "已满",
      activeName: "first",
      sele: [
        {
          value: "已满",
          label: "已满",
        },
        {
          value: "未满",
          label: "未满",
        },
      ],
      options: [
        {
          value: "全体",
          label: "全天",
        },
        {
          value: "上午",
          label: "上午",
        },
        {
          value: "下午",
          label: "下午",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped>
.home_title_right >>> .el-input__inner {
  padding: 0 0.13rem;
  height: 0.22rem;
  line-height: 0.22rem;
  font-size: 0.14rem;
  color: #1fa9da;
  border-color: #1fa9da;
}
.home_title_right >>> .el-input__prefix,
.home_title_right >>> .el-input__suffix {
  height: auto;
  top: -10px;
}
.home_title_right >>> .el-select-dropdown__list {
  margin-bottom: 0.1rem;
}
.home_title_right >>> .el-select-dropdown__item {
  padding: 0;
}
.home_content >>> .el-tabs__item.is-active {
  color: #d41045;
}
.home_content >>> .el-tabs__active-bar {
  background: #d41045;
}
</style>
<style lang="less" scoped>
.make_list_box {
  height: 3.2rem;
  overflow-y: auto;
  display: flex;
  .make_list_time {
    flex: 1;
    display: flex;
    label {
      width: 0.7rem;
      text-align: center;
      font-size: 0.16rem;
      line-height: 0.5rem;
      color: #5a6b80;
    }
    li {
      display: flex;
      font-size: 0.16rem;
      color: #000032;
      height: 0.5rem;
      align-items: center;
      justify-content: space-between;
      span {
        margin-right: 0.3rem;
      }
      button {
        background: #ffffff;
        border: 1px solid #dddfe6;
        border-radius: 0.02rem;
        width: 0.66rem;
        height: 0.3rem;
        text-align: center;
      }
    }
    li.active {
      color: #cccccc;
      button {
        border: 0;
      }
    }
  }
}
.home_title_right {
  .type_date {
    width: 0.7rem;
    height: 0.22rem;
    margin-right: 0.08rem;
  }
  .date1 {
    width: 0.8rem;
    height: 0.22rem;
  }
  .date2 {
    width: 1rem;
    height: 0.22rem;
  }
  .date3 {
    width: 1.2rem;
    height: 0.22rem;
  }
}
.home_header {
  padding: 0.2rem 0.3rem;
  .flex {
    justify-content: center;
  }
  .hd_img {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    margin-right: 0.1rem;
    img {
      display: block;
      width: 100%;
    }
  }
  .hd_name {
    font-size: 0.15rem;
    color: #5a6b80;
    font-weight: 600;
    img {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      margin-left: 10px;
      vertical-align: -20%;
    }
  }
  .hd_time {
    font-size: 0.12rem;
    color: #ccc;
  }
}
.home_info {
  background: #fafafa;
  font-size: 0.14rem;
  color: #5a6b80;
  height: 0.44rem;
  line-height: 0.44rem;
  padding: 0 0.3rem;
  .hi_more {
    width: 0.4rem;
    color: #1fa9da;
  }
}
.home_content {
  padding: 0 0.3rem;
  .inter_tit {
    font-size: 16px;
    color: #5a6b80;
    height: 0.4rem;
    font-weight: 600;
    line-height: 0.4rem;
    margin-top: 0.2rem;
  }
  .inter_wrap {
    border: 1px solid #f0f2f5;
    border-radius: 0.08rem;
    border-radius: 0.08rem;
    .flex {
      align-items: center;
      justify-content: space-between;
      .hd_dd {
        font-size: 0.16rem;
        color: #5a6b80;
        span {
          color: #1fa9da;
          margin-left: 0.1rem;
        }
      }
    }
  }
}
.home_time {
  justify-content: space-between;
  align-items: center;
  .ht_se {
    width: 1rem;
    margin-left: 0.1rem;
  }
}
.fu_info {
  margin: 0.1rem 0;
  .fu_txt {
    display: inline-block;
    width: 0.4rem;
    text-align: center;
  }
  .fu_time {
    font-size: 16px;
    color: #cccccc;
    margin: 0 0.2rem;
  }
}
</style>